<template>
	<!-- 商品管理 tabbar页面 -->
	<view id="total">
		<!-- 左边分类 -->
		<view class="classification-left">
			<text v-for="(item,index) in sort" :key="index" :class="{addto:index == sortNum}" @click="selectSort(index,item.sort_name,item._id)">{{item.sort_name}}</text>
		</view>

		<!-- 右边商品 -->
		<view class="classification-right">
			<view class="commodity" v-for="(item,index) in goods" :key="index">
				<!-- 商品封面图片 -->
				<view class="commodity-image">
					<image :src="item.goods_cover" mode="aspectFill"></image>
					<view :class="[item.stock <= 0 ? 'overdue-img' : '']"></view>  <!-- 火爆售罄-->
				</view>
				<!-- 商品详情 -->
				<view class="commodity-detail">
					<text class="commodity-title over-text">{{item.goods_title}}</text>
					<text class="commodity-stock">库存{{item.stock}}</text>
					<text class="commodity-price">￥{{item.goods_price}}</text>
					<view class="remove-button">
						<text @click="downShelves(item._id,index)" class="shelf-true" v-if="item.shelves">下架</text>
						<text class="shelf-false" v-else>已下架</text>
					</view>
				</view>
			</view>
			
			<!-- 没有数据的提示 -->
			<view class="tips" v-if="goods.length == 0 ">该分类下暂无商品</view>
			
			
			<!-- 加载提示 -->
			<view class="loading-height">
				<Loading v-if="loading"></Loading>
			</view>

			<!-- 占据位置 -->
			<view style="height: 90rpx;"></view>
		</view>
	</view>


	<!-- 底部按钮 -->
	<view class="bottom">
		<text @click="goSortManage">管理分类</text>
		<text @click="goAddSort">添加商品</text>
	</view>

</template>

<script setup>
	import { reactive, ref, toRefs, watch, onMounted } from "vue"
	import { skuValue } from "../../public/package-js/passValue.js"
	import { Upload } from "@/public/package-js/uploadImg.js"
	import { FeedBack } from "@/public/package-js/feedBack.js"
	import { init } from "@/public/package-js/init.js"
	import { onShow, onReachBottom } from '@dcloudio/uni-app' // vue3 导入 uni-app 其他生命周期API。
	import Loading from "@/component/loading/loading.vue"

	onShow(() => {
		getData()
	})

	let data = reactive({
		sort: [], //分类数据
		goods: [], // 商品数据
		sortNum: 0, // 分类的下标，用以设置点击分类样式改变，默认为 0
		sort_name: '', // 存储点击的分类的名字，用以上拉加载和不同分类展示不同商品
		sort_id: '', // 选择的分类的 id,便于下架时所属分类对应数量减少
		loading: false, // 上拉加载圈圈是否展示
		pageNum: 0, // 请求的页数，每请求一次，页数 +1
	})
	const { sort, goods, sortNum, loading } = toRefs(data)

	// 1、页面加载时从数据库中获取商品的分类以及第一个对应的商品
	async function getData() {
		let db = await init()
		const _ = db.database().command
		// 1-1  获取所有商品分类（前提是该分类下有商品）
		const res_sort = await db.database().collection("goods_sort")
		.field({
			sort_name: true // 只返回分类名称和 id（id是不管怎么样都会返回）
		}).get()
		// console.log("all",res_sort);

		// 获取第一个分类的分类名以及 id 
		data.sort_name = res_sort.data[0].sort_name
		data.sort_id = res_sort.data[0]._id

		// 赋值用以渲染分类数组
		data.sort = res_sort.data
		data.pageNum = 0 // 每次该页面展示的时候，请求页数置为 0

		// 1-2 请求第一个分类的商品
		selectSort(0, data.sort_name, data.sort_id)

	}

	// 2、点击分类获取对应的商品
	async function selectSort(index, sort_name, id) {
		// 点击不同页面分类展示的时候，请求页数置为 0
		data.pageNum = 0

		// 点击分类增加样式
		data.sortNum = index
		// 将点击的分类和 id 赋值
		data.sort_name = sort_name
		data.sort_id = id

		// 获取点击分类所属数据
		let db = await init()
		const res_goods = await db.database().collection("goods").where({
			category: data.sort_name // 根据分类查询获取对应的商品
		}).limit(10).field({
			// 选择要返回的数据
			goods_title: true,
			goods_cover: true,
			goods_price: true,
			stock: true,
			shelves: true,
		}).get()
		// console.log("res_goods", res_goods);
		data.goods = res_goods.data

	}

	// 3、点击下架，更改分类下商品的总数量以及上架状态
	async function downShelves(id, index) {
		let db = await init()
		uni.showModal({
			title: '提示',
			content: '确定下架该商品吗?',
			success: async function(res) {
				if (res.confirm) {
					try {
						// 更改数据库的上架状态
						let res = await db.database().collection("goods").doc(id).update({
							data: {
								shelves: false, //改变上架状态
							}
						})
						// 更改渲染的上架状态
						data.goods[index].shelves = false

						// 下架之后所属分类商品数量减少
						await db.database().collection("goods_sort").doc(data.sort_id).update({
							data: {
								quantity: db.database().command.inc(-1) //自减

							}
						})
						new FeedBack("下架成功", "success").toast()
					} catch (e) {
						new FeedBack("下架失败", "error").toast()
					}
				} else if (res.cancel) {
					new FeedBack("取消操作", "error").toast()
				}
			}
		});
	}

	// 4、上拉加载
	onReachBottom(async () => {
		// console.log("到底啦");
		data.loading = true /* 触底的时候让加载圈圈显示 */
		data.pageNum++

		let skip = data.pageNum * 10 // 跳过前面多少条开始获取
		let db = await init()
		const res = await db.database().collection('goods').where({
			category: data.sort_name
		}).skip(skip).limit(10).field({ // 使用skip，跳过对应的条数，输出剩下的
			// 选择要返回的数据
			goods_title: true,
			goods_cover: true,
			goods_price: true,
			stock: true,
			shelves: true,
		}).get()
		// console.log("res", res);
		data.goods = [...data.goods, ...res.data] // 将上拉加载的数据和之前的组装
		loading.value = false /* 请求完毕就让圈圈消失 */
	})

	// 5、点击管理分类，跳转
	function goSortManage() {
		uni.navigateTo({
			url: "/pages/classification_management/classification_management"
		})
	}

	// 6、点击添加商品，跳转
	function goAddSort() {
		uni.navigateTo({
			url: "/pages/goods_shelf/goods_shelf"
		})
	}
</script>

<style scoped>
	#total {
		display: flex;
	}

	.classification-left {
		width: 200rpx;
		text-align: center;
		background-color: #f6f6f6;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
	}

	.classification-left text {
		display: block;
		color: #5f5f5f;
		padding: 20rpx 0;
		border-bottom: 1px solid #FFFFFF;
		font-size: 28rpx;
	}

	/* 选中分类的样式 */
	.addto {
		background-color: #FFFFFF;
		font-weight: bold;
	}

	/* 右边 */
	.classification-right {
		margin: 0 20rpx 0 220rpx;
		flex: 1;
	}

	.commodity-image image {
		display: block;
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.commodity-image {
		position: relative;
	}

	.overdue-img {
		/* background-image: url("https://gitee.com/Angussd/note-image/raw/master/Image/202304031408856.png"); */
		background-image: url("https://gitee.com/Angussd/note-image/raw/master/Image/202304031418604.png");
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 10rpx;
		left: -10rpx;
		width: 170rpx;
		height: 150rpx;
	}

	.commodity {
		display: flex;
		margin-bottom: 50rpx;
	}

	.commodity text {
		display: block;
	}

	.commodity-detail {
		flex: 1;
		padding-left: 20rpx;
	}

	.commodity-detail view {
		display: flex;
		justify-content: flex-end;
	}

	.commodity-detail view text:nth-child(2) {
		margin-left: 50rpx;
	}

	.commodity-title {
		font-weight: bold;
	}

	.commodity-stock {
		padding: 10rpx 0;
		color: #c1c1c1;
		font-size: 26rpx;
	}

	.commodity-price {
		color: #b1865b;
		font-weight: bold;
	}

	.remove-button {
		padding-top: 20rpx;
	}

	.remove-button text {
		display: inline-block;
		width: 100rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 7rpx;
		/* padding: 10rpx 20rpx; */
		font-size: 27rpx;
	}

	.shelf-true {
		color: #FFFFFF;
		background-color: #E64340;
	}

	.shelf-false {
		background-color: #bfa;
		color: #707070;
	}

	/* 底部 */
	.bottom {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 200rpx;
		display: flex;
		justify-content: space-between;
	}

	.bottom text {
		text-align: center;
		padding: 20rpx 0;
	}

	.bottom text:nth-child(1) {
		flex: 1;
	}

	.bottom text:nth-child(2) {
		flex: 1;
	}

	.bottom text:nth-child(1) {
		background-color: antiquewhite;
	}

	.bottom text:nth-child(2) {
		background-color: aliceblue;
	}
</style>
